<template>
	<view class="page">
		<!-- <up-navbar title="百霸智育" @rightClick="{}" :autoBack="true" bgColor = "#f1f1f1" placeholder></up-navbar> -->
		<view class="content padding-30 box-sizing">
			<!-- <view class="flex width-full space-between fontSize-28">
				<view class="flex weight-700">
					每组词量({{headInfo.everyGroup}}个)<view class="width-10"></view> <up-icon @click="iconClick" name="setting" color="#2835d6" size="16"></up-icon>
				</view>
				<view class="">
					今日已刷：{{headInfo.finishWord}}/{{headInfo.totalWord}}   生词：{{headInfo.unknowWord}}
				</view>
			</view> -->
			<!-- <view class="flex width-full marginTop-30">
				<view class="width-full">
					<view class="marginBottom-10 width-full flex space-between fontSize-28">
						<view class="">
							今日任务：{{headInfo.currentGroup}}组/{{headInfo.totalGroup}}组
						</view>
						<view class="">
							已熟悉词：{{headInfo.currentGroup}}
						</view>
					</view>
					<up-line-progress activeColor = "#6dacf9" :showText="false" :percentage="Math.ceil((parseInt(headInfo.currentGroup)/parseInt(headInfo.totalGroup))*100)" height="8"></up-line-progress>
				</view>
			</view> -->
			<view  class="wordsContent marginTop-30 marginBottom-30 flex column">
				<!-- <view class="fontSize-26 weight-700">
					{{emitData.subscript}}区生词({{emitData.sheng}}个)
				</view> -->
				<view @click="activeWords(item,index)" style="min-height: 130rpx;" class="relative  marginBottom-10 padding-30 box-sizing paddingLeft-30 paddingRight-30 borderRadius-10 width-full flex space-between items-center" v-for="(item,index) in domList" :key="index" :class="item.isCurrent?'bgcedfffd':''">
					<view class="fontSize-30 weight-700 width-full flex flex-start marginBottom-20 ">
						<view class="fontSize-30 weight-700">
							{{parseInt(index)+1}}.{{item.wordHead}}
						</view>
						<!-- <view class="fontSize-24" >
							{{item.phone}}
						</view> -->
					</view>
					<view class="width-full" v-if="item.isKnow!=1&&item.isKnow!=3&&Object.keys(activeData).length>0">
						<view class="wordsDefaultText fontSize-24 " :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" >
							<view class="marginBottom-5" v-for="(t,i) in returnVal(item.tran)" :key="i">
								{{t}}
							</view>
						</view>
						<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
						<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
					</view>
				</view>
			</view>
			
		</view>
		<view  class="width-full box-sizing btns flex column items-center flex-center">
			
			<!-- <view  class=" flex flex-center" style = "width: 80vw;">
				<up-button @click="toTotal" size = "normal" type="primary"  :text="blockShow?'返回':'继续'"></up-button>
			</view> -->
			<view v-if="overShow" class=" flex flex-center" style = "width: 80vw;">
				<up-button @click="know" size = "normal" type="success"  text="熟悉词"></up-button>
				<view class="" style="width: 30%;height: 100%;"></view>
				<up-button @click="noKnow" size = "normal" type="error"  text="陌生词"></up-button>
			</view>
			<view v-if="!overShow" class=" flex flex-center" style = "width: 80vw;">
				<up-button @click="throttleFnc" size = "normal" type="primary"  :text="blockShow?'查看统计':'继续'"></up-button>
			</view>
			<!-- <view v-if="blockShow" class=" flex flex-center" style = "width: 80vw;">
				<up-button @click="block" size = "normal" type="primary"  text="返回"></up-button>
			</view> -->
			
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref,nextTick,inject } from 'vue'
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	const timer  = ref({})
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	innerAudioContext.onCanplay(() => {
		console.log('可以播放l ');
	});
	innerAudioContext.onPlay((e) => {
		
		console.log('音频播放事件', e);
	})
	innerAudioContext.onEnded((e) => {
		console.log('音频自然播放结束事件', e);
	})
	const throttleShow = ref(true)
	const play = (i,time,word)=>{
		if(true){
			timer.value['t'+i] = setTimeout(()=>{
				innerAudioContext.stop();
				innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${word}&type=1`;
				innerAudioContext.play();
			},time);
		}
	}
	const clear = ()=>{
		if(timer.value){
			let arr = Object.keys(timer.value)
			for (let s of arr) {
				console.log(timer.value[s])
				clearTimeout(timer.value[s]);
			}
		}
		
	}	
	const playChain = (i,time,word)=>{
		clear();
		play(i,time,word);
	}
	
	
	const insertWordInfoApi = inject('insertWordInfo');
	const reciteWordsApi = inject('reciteWords');
	// const getWordListApi = inject('getWordList');
	const startReciteApi = inject('startRecite');
	
	const headInfo = ref({
		book_id:'',
		page:1,
		everyGroup:null,
		totalWord:null,
		finishWord:null,
		unknowWord:null,
		totalGroup:null,
		currentGroup:1
	})
	const type = ref(1);//1为陌生词2为熟悉词
	const defaultActive = ref(null);
	const replace = ref(false)
	const activeData = ref({});
	const knowIndex = ref(0)
	const list = ref([]);
	const param = ref({
		wbook_id:'',
		times_id:'',
		knowword:[],
		unknowword:[],
		currentword:''
	})
	const blockShow = ref(false)
	const overShow = ref(false);
	const nextShow = ref(true);
	const currentPage = ref(0);
	const currentData = ref({})
	const domList = ref([])
	const emitData = ref({})
	onUnload(()=>{
		console.log('onHideonHideonHideonHide')
		clear();
	})
	
	
	const setDomList = ()=>{
		let obj = list.value.slice(currentPage.value,parseInt(currentPage.value)+1)[0]
		activeData.value[currentPage.value] = obj.wordId
		domList.value = [...domList.value,{
			...obj,
			isCurrent:true,
			isKnow:0,//1熟悉词2陌生词
		}];
		clear();
		// 语音触发次数
		for (var i = 0; i < 3; i++) {
			play(i,i*2000,obj.wordHead)
		}
		setCurrentData(obj);
		// if(currentPage.value>0){
		// 	updateKnowStatus();
		// }
	}
	const setCurrentData = (obj,isKnow = 0)=>{
		
		currentData.value = {
			...obj,
			isCurrent:true,
			isKnow:isKnow,//1熟悉词2陌生词
		}
		if(currentPage.value>0){
			for (var i = 0; i < currentPage.value; i++) {
				if(i!=currentPage.value){
					domList.value[i].isCurrent = false
					domList.value[i].isKnow = 3
				}
				
			}
		}
	}
	const updateKnowStatus = (type)=>{
		let k = parseInt(currentPage.value)-1
		// for (var i = 0; i < currentPage.value; i++) {
		// 	if(i!=currentPage.value){
		clear();
		console.log(k,knowIndex.value,currentPage.value,1111111)
		if(type == 2){
			let t = domList.value[knowIndex.value]
			// 语音触发次数
			for (var i = 0; i < 3; i++) {
				play(i,i*2000,t.wordHead)
			}
		}
		if(currentPage.value == knowIndex.value){
			console.log(currentPage.value == knowIndex.value,'currentPage.valuecurrentPage.value')
			domList.value[knowIndex.value].isKnow = type
			domList.value[knowIndex.value].isCurrent = false
			knowIndex.value = 0
			domList.value[currentPage.value].isCurrent = true
			nextShow.value = false
			overShow.value = false
			if(currentPage.value == list.value.length-1){
				blockShow.value = true
			}
		}else{
			domList.value[knowIndex.value].isKnow = type
			domList.value[knowIndex.value].isCurrent = false
			knowIndex.value++
			domList.value[knowIndex.value].isCurrent = true
		}
		
		// 	}
		// }
	}
	const know = ()=>{
		// let obj = domList.value[currentPage.value]
		// setCurrentData(1)
		updateKnowStatus(1);
	}
	const noKnow = ()=>{
		// let obj = domList.value[currentPage.value]
		// setCurrentData(obj,2)
		updateKnowStatus(2);
	}
	onLoad((op)=>{
		let parseData =  op.data?JSON.parse(op.data):{}
		console.log(op,'kkkkkkkkk')
		emitData.value = op.data?parseData:{}
		list.value = parseData&&parseData.wordList?parseData.wordList:[]
		let emitDataVal = parseData&&parseData.subscript?parseData.subscript.split('_'):['',''];
		console.log(op,emitData.value,'kkkkkkkkk')
		startReciteApi({
			page:parseData.page,
			big_sort:emitDataVal[0],
			small_sort:emitDataVal[1],
			type:parseData.type?parseData.type:2,
		}).then(res=>{});
		setDomList();
		// getList();
	})
	
	
	const returnVal = (val)=>{
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}
	
	const activeWords = (it,i)=>{
		// if(activeData.value[i]){
		// 	delete activeData.value[i]
		// 	let list1 = Object.keys(activeData.value)
		// 	defaultActive.value = list1.length>0?list1[list1.length-1]:null
		// }else{
		// 	activeData.value[i] = it.wordId
		// 	defaultActive.value = i
		// }
		
	}
	const typeChange = (t)=>{
		type.value = t
		activeData.value = {}
	}
	const insertWordInfo = (t)=>{
		let para = {
			wbook_id:param.value.wbook_id,
			times_id:param.value.times_id,
			knowword:param.value.knowword.join(),
			unknowword:param.value.unknowword.join(),
			currentword:param.value.currentword
		}
		uni.showLoading()
		setTimeout(()=>{
			uni.hideLoading()
		},2000)
		insertWordInfoApi(para).then(res=>{
			activeData.value = {}
			defaultActive.value = null
			if(t == 2){
				uni.redirectTo({
					url:'/pages/index/studyReport'
				})
			}else{
				headInfo.value.page++
				getList()
			}
			
		})
	}
	const btnClick = (t)=>{
		let k = Object.keys(activeData.value)
		
		return 
		if(k.length>0){
			param.value.currentword = list.value[list.value.length-1].wordRank;
			let knowWord = []
			for (var i = 0; i < list.value.length; i++) {
				if(!activeData.value[i]){
					knowWord = [...knowWord,list.value[i].wordId]
				}
			}
			if(type.value == 1){
				param.value.unknowword = Object.values(activeData.value);
				param.value.knowword = knowWord;
				
			}else{
				param.value.unknowword = knowWord;
				param.value.knowword = Object.values(activeData.value);
			}
			insertWordInfo(t)
		}else{
			// if(type.value == 1){
			// 	param.value.unknowword = knowWord;
			// 	param.value.knowword = Object.values(activeData.value);
				
			// }else{
			// 	param.value.unknowword = Object.values(activeData.value);
			// 	param.value.knowword = knowWord;
			// }
			uni.showModal({
				title: '确认提示',
				content: `是否将本组单词全部标记为${type.value == 1?'熟悉词':'陌生词'}并继续下一组？`,
				success: function (res) {
					if (res.confirm) {
						let unList = [];
						for (var i = 0; i < list.value.length; i++) {
							unList = [...unList,list.value[i].wordId]
							if(i == list.value.length-1){
								param.value.currentword = list.value[list.value.length-1].wordRank;
							}
						}
						if(type.value == 1){
							param.value.unknowword = [];
							param.value.knowword = unList;
							
						}else{
							param.value.unknowword = unList;
							param.value.knowword = [];
						}
						insertWordInfo(t)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			
		}
		
		// setTimeout(()=>{
		// 	replace.value = false
		// },500)
	}
	
	const iconClick = ()=>{
		uni.navigateTo({
			url:'/pages/my/brushWordSetUp'
		})
	}
	const throttleFnc = ()=>{
		if(throttleShow.value){
			nextWord();
			throttleShow.value = false
			setTimeout(()=>{
				throttleShow.value = true
			},500)
		}else{
			return
		}
		
	}
	const nextWord = ()=>{
		// btnClick(2)
		if(currentPage.value == list.value.length-1&&!nextShow.value){
			reciteWords();
		}else{
			console.log(currentPage.value+1,list.value.length,'currentPage.valuecurrentPage.valuecurrentPage.value')
			if(currentPage.value>0&&currentPage.value==1&&nextShow.value||currentPage.value>0&&nextShow.value){
				// currentPage.value++
				// setDomList()
				
				overShow.value = true
				domList.value[0].isCurrent = true
				domList.value[domList.value.length-1].isCurrent = false
				domList.value[domList.value.length-1].isKnow = 3
				// nextShow.value = false
			}else{
				currentPage.value++
				nextShow.value = true
				setDomList()
				
			
			}
			// nextShow.value = false
		}
		
		// uni.navigateBack() 
	}
	const reciteWords = ()=>{
		if(domList.value&&domList.value.length>0){
			let remWords = []
			let unremWords = []
			for (let s of domList.value) {
				if(s.isKnow == 1){
					remWords = [...remWords,s.wordId]
				}else{
					unremWords = [...unremWords,s.wordId]
				}
			}
			reciteWordsApi({
				remWords:remWords.join(),
				unremWords:unremWords.join(),
				big_sort:emitData.value.subscript.split('_')[0],
				small_sort:emitData.value.subscript.split('_')[1],
				page:emitData.value.page,
			}).then(res=>{
				console.log(res,'reciteWordsApireciteWordsApireciteWordsApi')
				// uni.navigateBack()
				toTotal();
			})
		}
		
		
	}
	const toTotal = ()=>{
		uni.navigateTo({
			url:'/pages/index/rememberWordTotal?data='+JSON.stringify(emitData.value)
		})
	}
	const block = ()=>{
		uni.navigateBack()
	}
</script>

<style lang="scss">
.red{
	color: red;
}
.blue{
	color: #71da79;
}
.redBj{
	background-color: #ffbfbf;
}
.blueBj{
	background-color: #c1e5ff;
}
.btns{
	padding-bottom: calc(50rpx);
}
.wordsContent{
	z-index: 9;
}
.wordsDefaultText{
	scale: 1;
	z-index: -99999;
	display: flex;
	flex-direction: column;
}
@keyframes pulse {
 // from {
 //     opacity: 1.0;
 //   }
   0% {
     opacity: 0;
   }
   20% {
     opacity: 1.0;
   }
   40% {
     opacity: 0;
   }
   60% {
     opacity: 1.0;
   }
   80% {
     opacity: 0;
   }
   100% {
     opacity: 1.0;
   }
   // 70% {
   //   opacity: 0;
   // }
   // 80% {
   //   opacity: 1.0;
   // }
   // 90% {
   //   opacity: 0;
   // }
   // to {}
}
.bgcedfffd{
	background-color: #edfffd;
}
.boxBorder{
	transition: all .3s;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		// top: -10px;
		// left: -10px;
		// right: -10px;
		// bottom: -10px;
		border: 2px solid #ffbfbf;
		border-radius: 10px;
		animation: div5Ani 1s  linear;
	}
	&::after {
	    content: "";
	    position: absolute;
	    inset: 0;
		// top: -10px;
	    // left: -10px;
	    // right: -10px;
	    // bottom: -10px;
	    border: 2px solid #ffbfbf;
	    border-radius: 10px;
	    animation: div5Ani 1s  linear;
	}
	&::after {
		animation: div5Ani 1s  -0.5s linear;
	}
	                        
}
.boxBorder1{
	transition: all .3s;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		// top: -0px;
		// left: -0px;
		// right: -10px;
		// bottom: -10px;
		border: 2px solid #05b602;
		border-radius: 10px;
		animation: div5Ani 1s  linear;
	}
	&::after {
	    content: "";
	    position: absolute;
		inset: 0;
	    // top: -10px;
	    // left: -10px;
	    // right: -10px;
	    // bottom: -10px;
	    border: 2px solid #05b602;
	    border-radius: 10px;
	    animation: div5Ani 1s  linear;
	}
	&::after {
		animation: div5Ani 1s  -0.5s linear;
	}
	                        
}

@keyframes div5Ani {
    0%,
    100% {
        clip-path: inset(0 0 98% 0);
    }

    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
}

.wordsText{
	display: inline-block;
	z-index: 9;
	animation: pulse 2s linear;
}
.hiddenText{
	display: none;
	scale: 1;
}
</style>
